
<!DOCTYPE html>
<html lang="zh-CN" ng-app>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">


    <title>AAA订座</title>
    <!-- Bootstrap core CSS -->
    <link href="/libs/bootstrap.min.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="/libs/dashboard.css" rel="stylesheet">
    <script type="text/javascript" src="/libs/angular.js"></script>

    <style type="text/css">
    table {
		width: 1000px;
		margin: 50px auto;
		border-collapse: collapse;
		table-layout: fixed;
	}
	td {
		border: 1px solid #666;
		height: 60px;
		text-align: center;
		line-height: 60px;
		position: relative;
	}
	.isSelected {
		background-color:  pink !important;
	}

	.seat {
		background-color: #449d44;
	}
	.teacher {
		background-color: #31b0d5;
	}
	.guodao {
		background-color: #ec971f;
	}
	ul.youji {
		position: absolute;
		width: 200px;
		left: 0;
		top: 0;
		display: none;
		background-color: #fff;
		border: 1px solid #ccc;
	}

	ul.youji li {
		height: 50px;
		line-height: 50px;
		font-size: 20px;
		text-align: center;
		cursor: pointer;

	}
	ul.youji li:hover {
		background-color: pink;
	}

	.table1 .bianji input {
		width: 100px;
		height: 30px;
		line-height: 30px;
		text-align: center;
		outline: none;
	}
	* {
		margin: 0;
		padding: 0;
		list-style: none;
		/*vertical-align: */
	}
	.closes {
		cursor: pointer;
	}
	.table1 td a {
		position: absolute;
		right: 10px;
		bottom: 0;
		height: 30px;
		line-height: 30px;
		display: none;
		text-decoration: none;
		font-size: 14px;
		color: #000;
  		font-weight: bold;
	}
	input,select {
		outline: none;
	}
	.table1 .bianji {
		width: 100px;
		margin: 0 auto;
	}
	.table1 .bianji input {
		display: none;
	}
	.table1 i {
		font-style: normal;
		font-size: 20px;
		color: #fff;
	
	}
	i.isself {
		color: #ccc;
	}
	.edit {
		display: none;
		margin-top: 10px;
	}
	#edit {
		margin-top: 10px;
	}
	.mask {
			width: 300px;
		
			background: rgba(0,0,0,0.5);
			position: fixed;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			z-index: 2000;
			display: none;
			align-items: center;
			justify-content: center;
			text-align: left;
			line-height: 20px;
		}
		.mask form{
			width: 400px;
			background: #fff;
			padding: 10px;
		}
		.alert {
			display: none;
		}
    </style>
   
  </head>

  <body>

    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="/">AAA订座系统</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
          	<li><a href="/">首页</a></li>
            <li><a href="javascript:;">欢迎你,<%= username %></a></li>
            <li><a href="/loginout">退出登录</a></li>
            
          </ul>
            <div ng-show="<%= manger ? false : true %>">
               <form action="/search" class="navbar-form navbar-right">
                  <input type="text" name="name" class="form-control" placeholder="Search...">
              </form>
            </div>
          
        </div>
      </div>
    </nav>

    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
          <ul class="nav nav-sidebar">
            <li><a href="/create">创建班级</a></li>
            <li class="active"><a href="/detail?act=m">位置管理</a></li>
            <li><a href="/allClass">班级管理</a></li>
            <li><a href="/quanxian?name=<%= username %>" onclick="quanxian()" ng-show="<%= username== 'admin' ? true : false;%>">权限管理</a></li>
          </ul>
       
         
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
        <div class="jumbotron">
        		
			<% if (err) { %>
					<h2>对不起,没有该班级</h2>
				<% } else { %>

	<% if (isShow) { %>
		<form action="/detail" class="form-inline">
			<input type="hidden" name="act" value="m">
			<select name="cNo" id="cNo" class="form-control">
				<% for (var i = 0;i < classArr.length;i++) { %>
				<option value="aaa<%= classArr[i] %>"  ng-selected="<%= cNo == 'aaa'+classArr[i] ? true : false %>"><%= classArr[i] %></option>
				<%}%>
			</select>
			<input type="submit" class="btn btn-default" value="查看">
		</form>
	<%}%>
				
			<table class="table1">
		<% if (datas.length) { %>
			<% if (isShow) { %>
				<input type="button" class="btn btn-default" value="启动编辑模式" id="edit">
			<%}%>
			<div class="edit">
					<a href="javascript:;" id="save" class="btn btn-success">保存</a>
					<a href="javascript:;" id="cancelEdit" class="btn btn-info">取消编辑</a>
				</div>
			<% var rows = datas[0].rows; %>
			<% var cols = datas[0].cols; %>
			<% for (var j = 0;j < rows;j++) { %>
				<tr>
				<% for (var m = 0;m < cols;m++) { %>
					
					<% var l = cols * j + m; %>
					<td class="<%= datas[l].stu ? 'seat' : '' %> <%= datas[l].teacher ? 'teacher' : '' %> <%= datas[l].guodao ? 'guodao' : '' %>"><div class="bianji"><input type="text"><i class="name <%= username == datas[l].sName ? 'isself' : '' %>"><%= datas[l].sName %><%= datas[l].tName %></i></div><a href="javascript:;">编辑</a><div class="mask">
    	<form action="" class="aaa<%= j.toString()+m.toString() %>">
    		<span aria-hidden="true" class="pull-right closes">&times;</span>
			  <div class="form-group">
			    <label for="exampleInputEmail1">名字</label>
			    <input type="text" class="form-control" id="exampleInputEmail1" placeholder="姓名" name="name" value="<%= datas[l].sName %><%= datas[l].tName %>">
			  </div>
			  <div class="form-group">
			    <label for="exampleInputPassword1">咨询师</label>
			    <input type="text" class="form-control" id="exampleInputPassword1" placeholder="咨询师" min="0" name="age" value="<%= datas[l].zixun %>">
			  </div>
			  <div class="form-group">
			  		<label>是否缴费</label>
			  		<input type="radio" name="sex" id="inlineRadio1" ng-checked="<%=datas[l].price ? true : false %>" value="1">
				  	<label  for="inlineRadio1">是</label>
					   
					<input type="radio" name="sex" id="inlineRadio2" ng-checked="<%=datas[l].price ? false : true %>" value="0">
					<label  for="inlineRadio2">
					   否 %>
					</label>
				</div>
				<div class="form-group">
					<label>备注:</label>
					<textarea class="form-control" rows="3"><%= datas[l].content %></textarea>
				</div>
			<button type="submit" class="btn btn-success">确认</button>
			
			<input type="button" class="btn btn-info cancelForm" value="取消" >
		</form>
    </div></td>
				<% } %>
				</tr>
			<% } %>
		<% }%>
	</table>
		<% } %>
				<!-- 成功失败 -->
			
				<div class="alert alert-warning alert-dismissible" role="alert">
				  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
				  	<span aria-hidden="true">&times;</span>
					</button>
				  <strong></strong> 
				</div>
			<ul class="youji">
				<li>添加</li>
				<li>教师机</li>
				<li>删除</li>
				<li>过道</li>
				<li>取消选中</li>
			</ul>
		</div>
          
      </div>
    </div>

  </body>
</html>
<script type="text/javascript" src="/libs/jquery-3.2.1.js"></script>
<script type="text/javascript">
	var all = 'isSelected seat teacher guodao';
	var dataArr = [];
	var oldArr = [];
	// 选择
	$('select').change(function () {
		$('#edit').hide();
		$('.edit').hide();
		$('.table1').empty();
	});
	// 编辑模式
	$('#edit').click(function () {
		$('.edit').show();
		$.eventAdd();
	});

	// 取消编辑
	$('#cancelEdit').click(function () {
		this.href = '/detail?act=m&cNo='+$('#cNo')[0].value;
	});
	// 数据产生
	$.extend({
		eventAdd: function () {

			// 选中单元格
		$('.table1 td').click(function () {
			
			$(this).toggleClass('isSelected');
			
		});
		// 编辑
		$('.table1 td a').click(function () {
			$(this).next().css({display: 'flex'});
			var r = $(this).parent().parent().index().toString();
			var c = $(this).parent().index().toString();
			var x = '.aaa'+r+c+' input[name="sex"]:checked';
			var form = $(this).next().children('form');
			// 名字
			var oldName = $(this).parent().children('.bianji').children('.name').html();
			var oldZixun = form.children('.form-group').eq(1).children('input').val();
			var oldPrice = $(x).val();
			var oldContent = form.children('.form-group').eq(3).children('textarea').val();
		
			// form.children('.form-group').eq(0).children('input');
			var stuName = $(this).parent().children('.bianji').children('.name').html();
			form.children('.form-group').eq(0).children('input').val(stuName);

			// 关闭
			$('.closes').click(function () {
				var form = $(this).parent();
				form.children('.form-group').eq(0).children('input').val(oldName);
				form.children('.form-group').eq(1).children('input').val(oldZixun);
				form.children('.form-group').eq(3).children('textarea').val(oldContent);
				if (oldPrice) {
					form.children('.form-group').eq(2).children('input').eq(0).attr('checked','checked');
				} else {
					form.children('.form-group').eq(2).children('input').eq(1).attr('checked','checked');
				}
				
				$('.mask').hide();
			});
			// 取消
			$('.cancelForm').click(function () {
				var form = $(this).parent();
				form.children('.form-group').eq(0).children('input').val(oldName);
				form.children('.form-group').eq(1).children('input').val(oldZixun);
				form.children('.form-group').eq(3).children('textarea').val(oldContent);
				if (oldPrice) {
					form.children('.form-group').eq(2).children('input').eq(0).attr('checked','checked');
				} else {
					form.children('.form-group').eq(2).children('input').eq(1).attr('checked','checked');
				}
				
				$('.mask').hide();
			});
			return false;
		});
		// 保存数据
		$('.mask form').submit(function () {
			var tr = $(this).parent().parent().parent();
			var td = $(this).parent().parent();
			var zIndex = tr.index();
			var l = tr.children().length;
			var sIndex = zIndex * l + td.index();
			var json = {
					cellId: sIndex+1,
					teacher: 0,
					guodao: 0,
					stu: 0,
					tName: '',
					sName: '',
					price: 1,
					zixun: '',
					content: ''
				}
			json.cNo = $('#cNo').val();
			var val = $(this).children('.form-group').eq(0).children('input').val();
			// 是否为添加
			if (td.hasClass('seat')) {
				
				json.sName = val;
				json.stu = 1;

			}
			// 是否为教师机
			if (td.hasClass('teacher')) {
				
				json.tName = val;
				json.teacher = 1;
			}

			// 是否为过道
			if (td.hasClass('guodao')) {
				
				json.sName = val;
				json.guodao = 1;
			}

			var maskForm = $(this).children('.form-group');
			// 咨询师
			json.zixun = maskForm.eq(1).children('input').val();

			var r = zIndex;
			var c = td.index();
			var x = '.aaa'+r+c+' input[name="sex"]:checked';
			if ($(x).val()) {
				// 是否缴费
				json.price = $(x).val();
			}
			// 备注
			json.content = maskForm.eq(3).children('textarea').val();
			$.ajax({
					url: '/update',
					data: json,
					success: function (aa) {
						console.log(aa);
						if (!aa.err) {
							td.children('.bianji').children('.name').html(val);
							$('.alert').show().children('strong').html('更新成功');
							$('.mask').hide();
						} else {
							$('.alert').show().children('strong').html('更新失败');
						}

						setTimeout(function () {
							$('.alert').hide();
						},1000);
					}
				});
			
			return false;
		});
		$('.mask').click(function (evt) {
			
			evt.stopPropagation();
		
		});
		$('i.name').click(function () {
			return false;
		});
		// 双击文字
		$('i.name').dblclick(function () {
			$('.table1 td a').hide();
			if ($(this).parent().parent().hasClass('seat') || $(this).parent().parent().hasClass('teacher')) {
				$(this).hide();
				$(this).prev().show();
				$(this).prev().val($(this).html());
				$(this).hide();
			} else {
				alert('只有定位的学员和教师机才能编辑');
			}
			
			return false;
		});

		

		

		// 关闭
		// $('.bianji span').click(function () {
		// 	$(this).parent().hide();
		// 	$(this).parent().next().show();
		// 	$(this).prev().val('');
		// 	$(this).parent().parent().children('.name').show();
		// 	return false;
		// });

		// 鼠标移入显示编辑按钮
		$('.table1 td').hover(function () {
			var flag1 =  $(this).hasClass('seat') || $(this).hasClass('teacher');
			if ($(this).children('.mask').css('display') == 'none' && flag1 && $(this).children('.bianji').children('input').css('display') == 'none') {
				$(this).children('a').show();
			}
			
		},function () {
			$(this).children('a').hide();
		});

		$('.table1 .bianji input').click(function () {
			return false;
		});
		// 编辑失去焦点
		$('.table1 .bianji input').blur(function () {
			$(this).hide();
			$(this).next().show();
			if ($(this).val()) {
				$(this).next().html($(this).val());
			}
			$(this).val('');
			var tr = $(this).parent().parent().parent();
			var td = $(this).parent().parent();
			var zIndex = tr.index();
			var l = tr.children().length;
			var sIndex = zIndex * l + td.index();
			var json = {
					cellId: sIndex+1,
					teacher: 0,
					guodao: 0,
					stu: 0,
					tName: '',
					sName: '',
					price: 1,
					zixun: '',
					content: ''
				}
			json.cNo = $('#cNo').val();
			var val = $(this).next().html();
			// 是否为添加
			if (td.hasClass('seat')) {
				
				json.sName = val;
				json.stu = 1;

			}
			// 是否为教师机
			if (td.hasClass('teacher')) {
				
				json.tName = val;
				json.teacher = 1;
			}

			// 是否为过道
			if (td.hasClass('guodao')) {
				
				json.sName = val;
				json.guodao = 1;
			}

			var maskForm = td.children('.mask').children('form').children('.form-group');
			// 咨询师
			json.zixun = maskForm.eq(1).children('input').val();

			var r = zIndex;
			var c = td.index();
			var x = '.aaa'+r+c+' input[name="sex"]:checked';
			if ($(x).val()) {
				// 是否缴费
				json.price = $(x).val();
			}
			// 备注
			json.content = maskForm.eq(3).children('textarea').val();
			$.ajax({
					url: '/update',
					data: json,
					success: function (aa) {
						console.log(aa);
						if (!aa.err) {
							td.children('.bianji').children('.name').html(val);
							$('.alert').show().children('strong').html('更新成功');
							$('.mask').hide();
						} else {
							$('.alert').show().children('strong').html('更新失败');
						}

						setTimeout(function () {
							$('.alert').hide();
						},1000);
					}
				});


			

		});
		// 编辑里面点击确定
		$('.table1 .bianji input').keydown(function (ev) {
			if (ev.keyCode == 13) {
				$(this).hide();
			$(this).next().show();
			if ($(this).val()) {
				$(this).next().html($(this).val());
			}
			$(this).val('');
			var tr = $(this).parent().parent().parent();
			var td = $(this).parent().parent();
			var zIndex = tr.index();
			var l = tr.children().length;
			var sIndex = zIndex * l + td.index();
			var json = {
					cellId: sIndex+1,
					teacher: 0,
					guodao: 0,
					stu: 0,
					tName: '',
					sName: '',
					price: 1,
					zixun: '',
					content: ''
				}
			json.cNo = $('#cNo').val();
			var val = $(this).next().html();
			// 是否为添加
			if (td.hasClass('seat')) {
				
				json.sName = val;
				json.stu = 1;

			}
			// 是否为教师机
			if (td.hasClass('teacher')) {
				
				json.tName = val;
				json.teacher = 1;
			}

			// 是否为过道
			if (td.hasClass('guodao')) {
				
				json.sName = val;
				json.guodao = 1;
			}

			var maskForm = td.children('.mask').children('form').children('.form-group');
			// 咨询师
			json.zixun = maskForm.eq(1).children('input').val();

			var r = zIndex;
			var c = td.index();
			var x = '.aaa'+r+c+' input[name="sex"]:checked';
			if ($(x).val()) {
				// 是否缴费
				json.price = $(x).val();
			}
			// 备注
			json.content = maskForm.eq(3).children('textarea').val();
			$.ajax({
					url: '/update',
					data: json,
					success: function (aa) {
						console.log(aa);
						if (!aa.err) {
							td.children('.bianji').children('.name').html(val);
							$('.alert').show().children('strong').html('更新成功');
							$('.mask').hide();
						} else {
							$('.alert').show().children('strong').html('更新失败');
						}

						setTimeout(function () {
							$('.alert').hide();
						},1000);
					}
				});

			}
			
		});

		// 
		$('.mask').css({width: $(document).width()});

				// 隐藏选项
			$(document).click(function () {
				$('ul.youji').hide();
			});

		

			$('ul.youji li').click(function () {
				// 添加
				if ($(this).index() == 0) {
					$.menu('seat');
				}
				// 教师机
				if ($(this).index() == 1) {
					$.menu('teacher');
				}
				// 取消订位/教师机
				if ($(this).index() == 2) {
					$('.table1 td').each(function () {
						if ($(this).hasClass('isSelected')) {
							$(this).removeClass(all);
							$(this).children('.bianji').children('.name').html('');
						}
					});
				}
				// 过道
				if ($(this).index() == 3) {
					$.menu('guodao');
				}
				// 取消选中
				if ($(this).index() == 4) {
					$('.table1 td').removeClass('isSelected');
				}
			});

			// 右击显示菜单
			$('.table1').on('contextmenu',function (ev) {

				$('ul.youji').show();

				$('ul.youji').css({left: ev.clientX - $('.jumbotron').offset().left,top: ev.clientY - $('.jumbotron').offset().top});

				

				return false;
			});

		}
	});
	// 添加类名
	$.extend({
		menu: function (name) {
			$('.table1 td').each(function () {
				if ($(this).hasClass('isSelected')) {
					$(this).removeClass(all).addClass(name);
					$(this).children('.bianji').children('.name').html('');
				}
			});
		}
	});

	$('.close').click(function () {
		$('.alert').hide();
	});
	// 数据产生
	$.extend({
		createData: function () {
				$('.table1 tr').each(function () {
				var zIndex = $(this).index();
				var l = $(this).children().length;
				$(this).children().each(function () {
					// 表格下标
					var sIndex = zIndex * l + $(this).index();

					// 数据还原
					for (var key in oldArr[sIndex]) {
							dataArr[sIndex][key] = oldArr[sIndex][key];	 
						}
					// 是否为添加
					if ($(this).hasClass('seat')) {
						
						dataArr[sIndex].sName = $(this).children('.bianji').children('.name').html();
						dataArr[sIndex].stu = 1;

					}
					// 是否为教师机
					if ($(this).hasClass('teacher')) {
						
						dataArr[sIndex].tName = $(this).children('.bianji').children('.name').html();
						dataArr[sIndex].teacher = 1;
					}

					// 是否为过道
					if ($(this).hasClass('guodao')) {
						
						dataArr[sIndex].sName = $(this).children('.bianji').children('.name').html();
						dataArr[sIndex].guodao = 1;
					}

					var maskForm = $(this).children('.mask').children('form').children('.form-group');
					// 咨询师
					dataArr[sIndex].zixun = maskForm.eq(1).children('input').val();

					var r = zIndex;
					var c = $(this).index();
					var x = '.aaa'+r+c+' input[name="sex"]:checked';
					if ($(x).val()) {
						// 是否缴费
						dataArr[sIndex].price = $(x).val();
					}
					
					// 备注
					dataArr[sIndex].content = maskForm.eq(3).children('textarea').val();
				});
			});

			return dataArr;
		}
	});
	// 保存
	$('#save').click(function () {
		dataArr = [];
		oldArr = [];
		$.ajax({
			url: '/getData',
			data: {cNo: $('#cNo')[0].value},
			success: function (s) {
				
				if (!s.err) {
					dataArr = s.data;
					$.each(s.data,function (i,ele) {
						oldArr.push(ele);
					});

					$.createData();
				
					$.each(dataArr,function (i,ele) {
						ele.cNo = $('#cNo').val();
						$.ajax({
							url: '/update',
							data: ele,
							success: function (aa) {
								console.log(aa);
								if (!aa.err) {
									location.href =  '/detail?act=m&cNo='+$('#cNo')[0].value;
								} else {
									$('.alert').show().children('strong').html('更新失败');
								}
							}
						});
					});
							
				
				}
			}
		});
		
		
	});
</script>